<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>96</title>
</head>
<style type="text/css">
	div{
		border: 1px solid red;
		width: 100px;
		height: 100px;
		position: relative;
	}
</style>
<body>

	<div id="box"></div>
	<script type="text/javascript">
		console.log(skl);
		console.log(skloo);
		var skloo='test';
		(function animate(id) {
					var el=document.getElementById(id);
					var tick=0;
					var timer=setInterval(()=>{
						if(tick<100){
							el.style.left=el.style.top=tick+'px';
							tick++;
						}else{
							clearTimeout(timer);
							console.info(tick);
						}
				},50)})('box');
				// 函数内部的函数，interval的回调
				// 惊人，简洁，直观的代码
				// 不是一个快照，而是一个真实状态封装
		function skl(nl){
			rep(nl+'skl');
		}
		function rep(msg){
			console.log(msg);
		}
		skl('kkk');
		skl('ddd');
		//
		//开始执行作用域是调用栈中的全局执行函数作用域
		//skl调用之后，进入新函数作用域，全局暂停
		//rep调用后，其作用域入栈，skl作用域暂停
		//rep执行完，skl恢复执行
		//skl执行完，全局恢复执行
		//call stack ... scope
		//
		const firconst='sam';
		try{
			firconst='nin';
			fail('noon');
		}catch(e){
			console.info('occured ...')
		}
		console.info(firconst);
		const secconst={};
		secconst.va='test';
		secconst.vaa='test11';
		console.info(secconst)
		const thridcon=[];
		thridcon.push('yooo~');
		thridcon.push('yooo~11');
		console.info(thridcon)

		// const 变量不能赋一个全新的值，对象复制可以修改
		const gn='sfs';
		function ree(){
			const fa='fsfs';
			for(let i=1;i<3;i++){
				let fgf=gn+''+fa;
				console.log(fgf);
			}
			// console.log(i);
			// console.log(fgf); not defined
		}
		ree();
		getn();
		// geti(); not a function 
		function getn(){

		}
		var geti=()=>{}

		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//
		//

	</script>
</body>
</html>